﻿<template>
    <div class="page select-exam-items-page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner navbar-inner-centered-title">
                <div class="title text-color-primary">选择检查项目</div>
                <div class="right">
                    <!-- 关闭弹窗 -->
                    <a class="link popup-close color-primary" data-popup="#exam-items-popup">
                        <i class="icon f7-icons if-not-md">xmark_circle</i>
                        <i class="icon material-icons md-only ">xmark_circle</i>
                    </a>
                </div>
            </div>
        </div>
        <div class="page-content">
            <div class="treeview-container">
            </div>
            <div class="buttons grid grid-cols-2 grid-gap">
                <button id="items-confim-btn" class="button button-raised popup-close">确定</button>
                <button id="reset-btn" class="button  button-raised">清空</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default (props, { $, $on, $f7, $h, $f7router, $theme, $update }) => {
        /*
            $   Dom7 标准库
            $on 页面事件处理器绑定
            $f7 app实例对象
            $h  html模板字面量
        */
        $on('pageInit', () => {
            $f7.preloader.show();
            getExamItems();
            // 点击确认
            $("#items-confim-btn").on('click', () => {
                let selectedItems = $("#select-exam-item-treeview [type='checkbox']:checked");
                let oids = [];
                let labels = [];
                for (let i = 0; i < selectedItems.length; i++) {
                    oids.push($(selectedItems[i]).attr('oid'));
                    labels.push($(selectedItems[i]).attr('label'));
                }
                oids = oids.join(',');
                labels = labels.join('、');
                $f7.emit('selectExamItems', oids, labels)
            })
            // 清空中
            $("#reset-btn").on('click', () => {
                $("#select-exam-item-treeview [type='checkbox']:checked").prop('checked', false);
            });
        })
        // 请求检查项目
        const getExamItems = () => {
            $f7.preloader.show();
            // 获取检查项目选项
            fetch(`/api/advanceSearch/getExamItemOptions`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                let response = res.json().then((result) => {
                    // 加载子项
                    loadExamItems(result.data.options);
                    $f7.preloader.hide();
                });
            });
        }

        //  加载treeView第一层
        const loadExamItems = (options) => {
            // 添加顶层
            let el = "";
            options.map((rootItem) => {
                if (rootItem.children && rootItem.children.length > 0) {
                    el += `<div class="treeview-item " directoyId="${rootItem.label}" >
                         <div class="treeview-item-root">
                                     <div class="treeview-toggle"></div>
                                     <div class="treeview-item-content">
                                     <i class="icon f7-icons">folder</i>
                                     <div class="treeview-item-label left-panel-item ">${rootItem.label}</div>
                                     </div>
                         </div>
                         <div class="treeview-item-children" directoyId="id_${rootItem.value}">

                         </div>
                    </div>`
                }
                else {
                    el += `<div class="treeview-item">
                                 <div class="treeview-item-root treeview-item-selectable">
                                     <div class="treeview-item-content">
                                         <label class="checkbox">
                                               <input type="checkbox" isItem="1" oid="${rootItem.value}" label="${rootItem.label}"/>
                                               <i class="icon-checkbox"></i>
                                         </label>
                                         <div class="treeview-item-label left-panel-item ">${rootItem.label}</div>
                                     </div>
                                 </div>
                    </div>`;
                }
            });
            let $treeview = $('<div class="treeview" id="select-exam-item-treeview"></div > ');
            $treeview.append(el);
            let roots = options.filter((option) => option.children && option.children.length > 0);
            recursionAdd(roots, $treeview);
            $('.select-exam-items-page .page-content .treeview-container').append($treeview);
        }
        // 加载检查子项目
        const recursionAdd = (roots, $treeview) => {
            for (let i = 0; i < roots.length; i++) {
                if (roots[i].children && roots[i].children.length > 0) {
                    roots[i].children.map((child) => {
                        let html = "";
                        if (child.children && child.children.length > 0) {// 目录
                            html += `<div class="treeview-item" directoyId="${child.value}"  >
                                <div class="treeview-item-root"  id="${child.value}">
                                            <div class="treeview-toggle"></div>
                                            <div class="treeview-item-content">
                                                <i class="icon f7-icons">folder</i>
                                                <div class="treeview-item-label left-panel-item ">${child.label}</div>
                                            </div>
                                </div>
                                <div class="treeview-item-children" directoyId="id_${child.value}">

                                </div>
                           </div>`
                        }
                        else { // 具体项
                            html += `<div class="treeview-item panel-close">
                                        <div class="treeview-item-root treeview-item-selectable">
                                            <div class="treeview-item-content">
                                                <label class="checkbox">
                                                      <input type="checkbox" isItem="1" oid="${child.value}" label="${child.label}"/>
                                                      <i class="icon-checkbox"></i>
                                                </label>
                                                <div class="treeview-item-label left-panel-item ">${child.label}</div>
                                            </div>
                                        </div>
                             </div>`
                        }
                        $treeview.find(`.treeview-item-children[directoyId='id_${roots[i].value}']`).append(html);
                        if (child.children && child.children.length > 0) {
                            recursionAdd([child], $treeview);
                        }
                    })
                }
            }
        }
        return $render;
    };
</script>
